<style>
  .table th,
  .table td {
    text-align: center;
  }

  .nav-tabs {
    border-bottom: none;
  }
</style>
<form
  id="edit-form"
  class="form-horizontal"
  role="form"
  data-toggle="validator"
  method="POST"
  action=""
>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2"
      >{:__('Category_id')}:</label
    >
    <div class="col-xs-12 col-sm-8">
      <input
        id="c-category_id"
        data-rule="required"
        data-source="category/selectpage"
        data-params='{"custom[type]":"setmeal"}'
        class="form-control selectpage"
        name="row[category_id]"
        type="text"
        value="{$row.category_id|htmlentities}"
      />
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
    <div class="col-xs-12 col-sm-8">
      <input
        id="c-name"
        data-rule="required"
        class="form-control"
        name="row[name]"
        type="text"
        value="{$row.name|htmlentities}"
      />
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Price')}:</label>
    <div class="col-xs-12 col-sm-8">
      <input
        id="c-price"
        data-rule="required"
        class="form-control"
        step="0.01"
        name="row[price]"
        type="number"
        value="{$row.price|htmlentities}"
      />
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2"
      >{:__('Setmeal_dish')}:</label
    >
    <div class="col-xs-12 col-sm-8">
      <button
        id="addDish"
        type="button"
        class="btn btn-success"
        data-toggle="modal"
        style="margin-bottom: 5px"
      >
        添加菜品
      </button>
      <table id="dishTable" class="table table-bordered">
        <thead>
          <tr>
            <th>菜品名称</th>
            <th>原价</th>
            <th>份数</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td>鱼香肉丝</td>
            <td>￥44.00</td>
            <td class="col-xs-3">
              <input type="number" name="" id="input" class="form-control" />
            </td>
            <td>删除</td>
          </tr> -->
          {volist name="setmeal" id="item" }
          <tr>
            <td>{$item.name}</td>
            <td>￥{$item.price}</td>
            <td class="col-xs-3">
              <input
                type="hidden"
                name="row[dish_list][{$key}][id]"
                value="{$item.id}"
              />
              <input
                type="hidden"
                name="row[dish_list][{$key}][name]"
                value="{$item.name}"
              />
              <input
                type="hidden"
                name="row[dish_list][{$key}][price]"
                value="{$item.price}"
              />
              <input
                type="number"
                name="row[dish_list][{$key}][copies]"
                id="input"
                min="1"
                value="{$item.copies}"
                class="form-control"
              />
            </td>
            <td class="del">删除</td>
          </tr>
          {/volist}
        </tbody>
      </table>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
    <div class="col-xs-12 col-sm-8">
      <div class="input-group">
        <input
          id="c-image"
          class="form-control"
          size="50"
          name="row[image]"
          type="text"
          value="{$row.image|htmlentities}"
        />
        <div class="input-group-addon no-border no-padding">
          <span
            ><button
              type="button"
              id="faupload-image"
              class="btn btn-danger faupload"
              data-input-id="c-image"
               data-mimetype="image/jpeg,image/png,image/jpg"
              data-multiple="false"
              data-preview-id="p-image"
               data-maxsize="2M"
            >
              <i class="fa fa-upload"></i> {:__('Upload')}
            </button></span
          >
          <span
            ><button
              type="button"
              id="fachoose-image"
              class="btn btn-primary fachoose"
              data-input-id="c-image"
              data-mimetype="image/jpeg,image/png,image/jpg"
              data-multiple="false"
              data-maxsize="2M"
            >
              <i class="fa fa-list"></i> {:__('Choose')}
            </button></span
          >
        </div>
        <span class="msg-box n-right" for="c-image"></span>
      </div>
      <div style="display: flex; margin-top: 10px; align-items: center">
        <ul
          class="row list-inline faupload-preview"
          id="p-image"
          data-template="imagetpl"
          style="min-width: 130px"
        ></ul>
        <div style="margin-left: 10px">
          <p>图片大小不超过2M</p>
          <p>仅能上传PNG JPG JPEG类型图片</p>
        </div>
      </div>
      <!-- <ul class="row list-inline faupload-preview" id="p-image"></ul> -->
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2"
      >{:__('Description')}:</label
    >
    <div class="col-xs-12 col-sm-8">
      <textarea
        id="c-description"
        class="form-control"
        rows="5"
        name="row[description]"
        cols="50"
      >
{$row.description|htmlentities}</textarea
      >
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
    <div class="col-xs-12 col-sm-8">
      <div class="radio">
        {foreach name="statusList" item="vo"}
        <label for="row[status]-{$key}"
          ><input id="row[status]-{$key}" name="row[status]" type="radio"
          value="{$key}" {in name="key" value="$row.status"}checked{/in} />
          {$vo}</label
        >
        {/foreach}
      </div>
    </div>
  </div>

  <div class="form-group layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8">
      <button type="submit" class="btn btn-primary btn-embossed disabled">
        {:__('OK')}
      </button>
    </div>
  </div>
</form>

<!-- 模态框 -->
<div
  class="modal fade"
  id="myModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">添加菜品</h4>
      </div>
      <div class="modal-body" style="height: 300px">
        <div style="display: flex">
          <!-- 左侧分类 -->
          <div class="col-xs-8">
            <input
              type="text"
              name=""
              id="input"
              class="form-control"
              placeholder="请输入菜品名称进行搜索"
            />
            <div style="display: flex; margin-top: 10px">
              <!-- Nav tabs -->
              <ul
                id="catNav"
                class="nav nav-tabs"
                role="tablist"
                style="display: flex; flex-direction: column"
              >
                <!-- <li role="presentation" class="active">
                  <a
                    href="#home"
                    aria-controls="home"
                    role="tab"
                    data-toggle="tab"
                    >荤菜</a
                  >
                </li>
                <li role="presentation">
                  <a
                    href="#profile"
                    aria-controls="profile"
                    role="tab"
                    data-toggle="tab"
                    >素菜</a
                  >
                </li>
                <li role="presentation">
                  <a
                    href="#messages"
                    aria-controls="messages"
                    role="tab"
                    data-toggle="tab"
                    >Messages</a
                  >
                </li>
                <li role="presentation">
                  <a
                    href="#settings"
                    aria-controls="settings"
                    role="tab"
                    data-toggle="tab"
                    >Settings</a
                  >
                </li> -->
              </ul>

              <!-- Tab panes -->
              <div id="tabContent" class="tab-content" style="flex: 1">
                <!-- <div role="tabpanel" class="tab-pane active" id="home">
                  <table  class="table table-bordered table-hover">
                    <tbody>
                      <tr>
                        <td><input type="checkbox"></td>
                        <td>糖酥里脊</td>
                        <td>在售</td>
                        <td>￥40.00</td>
                      </tr>
                       <tr>
                        <td><input type="checkbox"></td>
                        <td>糖酥里脊</td>
                        <td>在售</td>
                        <td>￥40.00</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">profile</div>
                <div role="tabpanel" class="tab-pane" id="messages">
                  messages
                </div>
                <div role="tabpanel" class="tab-pane" id="settings">
                  settings
                </div> -->
              </div>
            </div>
          </div>
          <!-- 右侧显示已选菜品 -->
          <div class="col-xs-4">
            <div class="panel panel-default">
              <div class="panel-body">
                已选菜品（<small id="dishCount">0</small>）
              </div>
            </div>
            <ul id="dishList" class="list-group">
              <!-- <li
                href="#"
                class="list-group-item"
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div>
                  <h4 class="list-group-item-heading">西红柿炒鸡蛋</h4>
                  <p class="list-group-item-text">￥15.00</p>
                </div>
                <span class="glyphicon glyphicon-remove delete-dish"></span>
              </li> -->
            </ul>
          </div>
        </div>
      </div>
      <div class="modal-footer" style="text-align: center">
        <button id="addBtn" type="button" class="btn btn-success">添加</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">
          取消
        </button>
      </div>
    </div>
  </div>
</div>



<!-- 自定义图片预览模版 -->
<script type="text/html" id="imagetpl">
  <li class="col-xs-12" style="margin-top: 0;">
    <a
      href="<%=fullurl%>"
      data-url="<%=url%>"
      target="_blank"
      class="thumbnail"
    >
      <img src="<%=fullurl%>" class="img-responsive" />
    </a>
    <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"
      ><i class="fa fa-trash"></i
    ></a>
  </li>
</script>
